<template style="background-color:white;">
	<view class="header">

		<view class="container">
			<view class="banner">
				<image class="banner-image" src="https://aw2025ht.kangye.xyz/api/profile/upload/bwg.jpg" mode="aspectFill"></image>
			</view>
			<view class="section history" @click="toBieDeYeMian('/packagenew/pages/guanShiJieShao/guanShiJieShao')">
				<image class="history-bg" src="https://aw2025ht.kangye.xyz/api/profile/upload/gsjs.jpg" mode="aspectFill"></image>
				<!-- <view class="section-header"> -->
				<!-- <text class="section-title">馆史介绍</text> -->
				<!-- <text class="section-arrow">></text> -->
				<!-- </view> -->
				<!-- <view class="section-content"> -->
				<!-- <text class="section-description">胎盘文化博物馆位于邯郸市经济开发区美的路113号</text> -->
				<!-- </view> -->
			</view>
			<view class="section-group">
				<!-- <image class="history-bg" src="/static/image/gsjs.jpg" mode="aspectFill"></image> -->
				<view class="section honor" @click="toBieDeYeMian('/package/pages/rongYuZiZhi/rongYuZiZhi')">
					<image class="ryzzimage" mode="aspectFill" src="https://aw2025ht.kangye.xyz/api/profile/upload/tyzz.jpg" style="border-radius: 18%;"></image>
					<!-- <view class="section-header">
						<text class="section-title">荣誉资质</text>
						<text class="section-arrow">></text>
					</view>
					<view class="section-content">
						<text class="section-description">我们在胎盘领域获得了多项专利证书</text>
					</view> -->
				</view>
				<view class="section-right">
					<view class="xiaYou section team" @click="toBieDeYeMian('/packagenew/pages/yanFaTuanDui/yanFaTuanDui')">
						<image class="tftpimage" mode="aspectFill" src="https://aw2025ht.kangye.xyz/api/profile/upload/yftt.jpg"></image>
						<!-- <view class="section-header">
							<text class="section-title">研发团队</text>
							<text class="section-arrow">></text>
						</view> -->
					</view>
					<view class="xiaYou section application"
						@click="toBieDeYeMian('/package/pages/taiPanYingYong/taiPanYingYong')">
						<image class="tftpimage"  mode="aspectFill"  src="https://aw2025ht.kangye.xyz/api/profile/upload/tpyyly.jpg"></image>
						<!-- <view class="section-header">
							<text class="section-title">胎盘应用领域</text>
							<text class="section-arrow">></text>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
	<use-tabber :list="list" :active="active"></use-tabber>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store/counter.js';
	import {
		storeToRefs,
	} from 'pinia'
	const {
		role,
		getRole
	} = storeToRefs(useStore());
	const store = useStore();
	const currentRole = ref('')
	const list = ref([]);
	const active = ref(2)
	onShow(() => {

		list.value = store.getRole()
		currentRole.value = store.role;
		// $page.style.backgroundColor = "#ffffff";
	})


	const toBieDeYeMian = (urlDiZhi) => {
		uni.navigateTo({
			url: urlDiZhi // 目标页面的路径
		});
	}
</script>

<style>
	

	.tftpimage {
		width: 100%;
		height: 89%;
	}

	.ryzzimage {
		width: 100%;
		height: 100%;

	}

	.section image {
		/* width: 100%; */ 
		    border-radius: 20px;
		    /* height: 100%; */
		    /* padding: 1px;*/
	}

	.history {
		position: relative;
	}

	.history-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: white;
	}

	.section-arrow {
		color: white;
	}

	.section-content {
		margin-top: 5px;
	}

	.section-description {
		font-size: 14px;
		color: white;
		line-height: 1.5;
	}

	page {
		background-color: #ffffff !important;
	}

	.header {
		position: relative;
		width: 100%;
		height: 180px;
		background: linear-gradient(to bottom, #1c6ddc, #fafcff);
		/* display: flex; */
		/* justify-content: flex-start; */
		/* align-items: flex-start; */
		padding-top: 20px;
		z-index: 10;
	}

	.title {
		color: white;
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 40rpx;
		width: 90%;
		text-align: center;
		height: 150rpx;
		line-height: 158rpx;
	}

	.container {
		/* min-height: 100vh; */
		padding: 0 20px;
		/* margin-top: 180px; */
		/* background-color: #f2f4f7; */
	}

	.banner {
		margin: 10px 0;
		border-radius: 20px;
		overflow: hidden;
		height: 419rpx;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.section {
		background-color: white;
		/* border-radius: 40rpx; */
		margin-bottom: 40rpx;
		/* padding: 40rpx; */
		overflow: hidden;
		height: 200rpx;

		/* width: 183px;*/
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.section-arrow {
		color: #666;
	}

	.section-content {
		margin-top: 5px;
	}

	/* 777 */
	.section-description {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.history {
		/* background: linear-gradient(to right, #007aff, #00aaff); */
		/* background-image: url("/static/image/gsjs.jpg"); */
		color: white;
	}

	.honor {
		margin-right: 20rpx;
		    width: 47%;
		    height: 287rpx;
	}

	.team {
		/* background: linear-gradient(to right, #CD853F, #D2B48C); */
		color: white;
	}

	.application {
		/* background: linear-gradient(to right, #007aff, #00aaff); */
		color: white;
	}

	.section-group {
		display: flex;
		margin-bottom: 40rpx;
		width: 100%;
	}



	.section-right {
		    display: flex;
		    flex-direction: column;
		    height: 160px;
		    width: 59%;
	}

	.team,
	.application {
		/* flex: 1; */
		margin-bottom: 10px;
		padding: 3px;
	}
</style>